<template>
	<div style="border: 1px solid #ccc">
		<div class="header">
			<el-input v-model="title" style="max-width: 600px" placeholder="标题内容">
				<template #prepend>输入标题</template>
			</el-input>
			<el-radio-group v-model="type" class="redio">
				<el-radio value="2" size="large">重要</el-radio>
				<el-radio value="1" size="large">不重要</el-radio>
			</el-radio-group>
		</div>
		<!-- wangEditor结构 -->
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
			:mode="mode" />
		<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :mode="mode"
			@onCreated="handleCreated" />
	</div>
	<div class="footer">
		<el-button type="primary" @click="sendedit">确认发布通知</el-button>
	</div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {
	onBeforeUnmount, ref, shallowRef, defineProps
} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { setaedit, settedit } from '@/apis/edit'
import { ElMessage } from 'element-plus'
const prop = defineProps(['acc', 'account', 'edit'])
const title = ref('')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// mode
const mode = ref('default')
// 内容 HTML
const valueHtml = ref()
const type = ref('1')
const toolbarConfig = {
	excludeKeys: ['blockquote',
		'bgColor',
		'color',
		'group-more-style',
		'fontFamily',
		'bulletedList',
		'numberedList',
		'lineHeight',
		'todo',
		'emotion',
		'insertLink',
		'group-video',
		'insertTable',
		'codeBlock',
		'divider',
		'fullScreen',
		'group-image',]
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})
const handleCreated = (editor) => {
	editorRef.value = editor // 记录 editor 实例，重要！
}
const sendedit = async () => {
	console.log(prop.account);
	
	if (title.value == '' || valueHtml.value.length < 12) return ElMessage({ type: 'warning', message: '部分数据为空请输入' })
	if (prop.edit == 1) {
		const res = await setaedit({ [prop.acc]: prop.account, val: valueHtml.value, type: type.value, title: title.value })
		if (res.data.status != 200) return ElMessage({ type: 'error', message: '发布通知失败' })
	}
	else {
		const res = await settedit({ [prop.acc]: prop.account, val: valueHtml.value, type: type.value, title: title.value })
		if (res.data.status != 200) return ElMessage({ type: 'error', message: '发布通知失败' })
	}
	ElMessage({ type: 'success', message: '发布成功' })
	title.value = ''
	valueHtml.value = ''
}
</script>
<style scoped>
.header {
	display: flex;
	align-items: center;
}

.el-radio.el-radio--large {
	height: 32px;
}

.redio {
	margin-left: 20px;
}
</style>
